<template>
    <div id="studyPage">
        <div class="container" style="margin: 3rem 0;">
            <div class="studyHead" style="margin: 1rem 0;">
                <div class="studyImg">
                    <el-image :src="require('@/assets/img/home/轮播1.png')" style="height: 100%;"></el-image>
                </div>
                <div class="studyMsg">
                    <div style="font-size: 20px;width: 100%;">用python制作吃豆人游戏<i style="float: right;font-size: 25px;"
                            class="el-icon-star-off"></i></div>
                    <div class="studyTags" style="margin: 0.5rem 0;">
                        <div class="tag">Python</div>
                        <div class="tag">游戏开发</div>
                        <div class="tag">编程</div>
                        <div class="tag">图形</div>
                        <div class="tag">趣味</div>
                    </div>
                    <div class="allMsgs">
                        编程语言：Python
                    </div>
                    <div class="allMsgs">
                        项目类型：趣味实用
                    </div>
                    <div class="allMsgs">
                        项目难度：初级
                    </div>
                    <div class="allMsgs">
                        项目简介：用python制作一个吃豆人的游戏，使用pygame框架结合pygui
                        图形化界面
                    </div>
                    <div style="width: 100%;display: flex;">
                        <div style="color: #f00;font-size: 26px;margin-right: 1rem;">￥2999</div>
                        <div
                            style="cursor: pointer;color: #fff; border-radius: 4px;height: 36px;background-color: #2D6EFF;padding: 0 1rem;line-height: 36px;">
                            立即报名</div>
                        <div style="display: flex;align-items: center;">
                            <!-- 浏览量 -->
                            <div class="watchNum">
                                <span><i class="el-icon-view"></i></span>
                                <span>100</span>
                            </div>
                            <!-- 收藏量 -->
                            <div class="collectNum">
                                <span><i class="el-icon-star-off"></i></span>
                                <span>100</span>
                            </div>
                            <!-- 点赞量 -->
                            <div class="planNum">
                                <span><i class="el-icon-document-checked"></i></span>
                                <span>100</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="container" style="margin-bottom: 3rem;">
            <div class="studyContent">
                <div v-if="!isxiangqing" style="margin-right: 3rem; cursor: pointer;" @click="showstudyDetails">项目详情
                </div>
                <div v-if="isxiangqing" style="margin-right: 3rem;color: #2D6EFF;cursor: pointer;"
                    @click="showstudyDetails">项目详情</div>
                <div v-if="!isJob" style="cursor: pointer;" @click="showJob">项目任务</div>
                <div v-if="isJob" style="color: #2D6EFF;cursor: pointer;" @click="showJob">项目任务</div>
                
                <div style="width: 100%;margin: 1rem 0;">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isxiangqing: true,
                isJob: false
            }
        },
        methods: {
            showstudyDetails() {
                this.isxiangqing = true
                this.isJob = false
                this.$router.push('/studyPage/studyDetails')
            },
            showJob() {
                this.isxiangqing = false
                this.isJob = true
                this.$router.push('/studyPage/studyJob')
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/css/study/studyPage.scss';
</style>
